import Taro, { Component } from '@tarojs/taro';
import { View, ScrollView, Image, Text } from '@tarojs/components';
import { DNavBar, DTabs, DItemError } from '@/components';
import { AtSearchBar } from 'taro-ui'
import './index.scss';
import http from '@/api'

export default class InventoryManage extends Component {
  state = {
    titleIcon: require('@/assets/images/inventory_icon.png'),
    rightArrowIcon: require('@/assets/images/right_arrow_icon.png'),
    tabs: [{
      name: '已盘库',
      value: 2
    }, {
      name: '已处理',
      value: 9
    }],
    list: [],
    tabIndex: 2,
    totalPage: 0,
    form: {
      page: 0,
      limit: 10,
    },
    searchVal: '',
    inputVal: '',
    pageNum: 10,
    nowRank: 0
  }
  componentDidShow() {
    this.getStocktakingList()
  }
  onScrollToLower = () => {
    // console.log('到底了')
    this.setState( this.getStocktakingList)
    // this.getStocktakingList()
  }
  getStocktakingList() {
    const { form, tabIndex: status, pageNum } =  this.state
    // console.log(pageNum > 0)
    if (pageNum > 0 ){
      // form = decodeURI(form)
      http.getAllCarDealer({ ...form }).then( data => {
        if (form.page === 0) {
          // this.setState({list: res.data})
          this.setState({
            list: data.carDealerSummaries,
            pageNum: data.carDealerSummaries.length,
            form: { ...this.state.form, page: data.page }
          }, () => {
            console.log('12', this.state.form)
          })
        } else {
          this.setState({ list: [...this.state.list, ...data.carDealerSummaries], pageNum: data.carDealerSummaries.length , form: { ...this.state.form, page: data.page } }, ()=>{
            console.log('2',this.state.list, this.state.form)
          })
        }
          
      })
    } 

  }
  handleTabClick = (index) => {
    this.setState({
      tabIndex: index,
      list: [],
      form: {
        ...this.state.form,
        page: 0
      }
    }, this.getStocktakingList)
  }
  handleItemClick = (id) => {
    // Taro.navigateTo({ url: '/pages/historyOrder/detail?id=' + id })
  }
  handleStatusText(status) {
    return {
      1: '待审核',
      2: '审核通过',
      3: '审核不通过',
      4: '待放盘库',
      5: '资料不全',
      5: '盘库完成',
      }[status]
  }
  searchValChange = (val) => {
    this.setState({ searchVal: val.trim() })
  }
  onClear = () => {
    let form = this.state.form
    this.setState({ searchVal: ''}, this.getStocktakingList)
  }
  onActionClick = () => {
    console.log(this.state.searchVal)
    this.setState({
      form: {
        ...this.state.form,
        page: 0,
        otherUserName: this.state.searchVal
      }
    }, this.getStocktakingList)
  }

  render() {
    const { tabs, list, tabIndex, titleIcon, rightArrowIcon, searchVal } = this.state;

    return (
      <View className="inventory-manage">
        <DNavBar title="车商汇总"></DNavBar>

        <AtSearchBar value={searchVal}
                     maxLength={80}
                     onChange={this.searchValChange}
                     onActionClick={this.onActionClick}
                     onClear={this.onClear} 
                    placeholder='请输入车商名称查询'
                     />


        <ScrollView scrollY className="inventory-manage__body" onScrollToLower={this.onScrollToLower}>
          {
            list.map((item,index) => (
              <View className="list-item list-item--style" onClick={() => this.handleItemClick(item.id)}>
                <View className="list-item__title">
                  <Text className="list-item__title__text">{index + 1}.&nbsp;&nbsp;</Text>
                  {/* <Image src={titleIcon} className="list-item__title__icon"></Image> */}
                  <Text className="list-item__title__text">{item.carDealer}</Text>
                  {/* {
                    tabIndex === 9 && <View className={['list-item__title__tag', item.status == 4 ? 'pass' : 'no-pass'].join(' ')}>
                      <Text>{this.handleStatusText(item.status)}</Text>
                    </View>
                  } */}
                </View>
                <View className="list-item__info flex-box between">
                  <View className="list-item__info__text coll_33 t-left">
                    <View className=" t-left"> 订单数量</View>
                    <View className=" t-left"> {item.quantityOfOrder}</View>
                  </View>
                  <View className="list-item__info__text coll_33 t-left">
                    <View className=" t-left"> 合同总额</View>
                    <View className=" t-left">{item.totalContract} 万</View>
                  </View>
                  <View className="list-item__info__text coll_33 t-left">
                    <View className=" t-left"> 垫付总额</View>
                    <View className=" t-left">{item.totalAdvances} 万</View>
                  </View>
                 </View>
              </View>
            ))
          }
          {
            list.length === 0 && <DItemError type={searchVal ? 2 : 1}></DItemError>
          }
        </ScrollView>
      </View>
    )
  }
}
